<template>
  <div class="container" :class="theme">
  <slot></slot>
  <div class="component-wrap">
    <div class="materials-box datav-box">
        <div class="materials-header">
            <h4>物资概况</h4> 
            <div class="select">
                    <el-select v-model="value" size="mini" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
            </div>
        </div>
      <div class="materials-con">
        <div v-for="(item, index) in materialsList" :key="index" class="materials-list">
            <p class="materials-name">{{item.name}}</p>
            <div class="num">{{item.num}}<span> {{item.unit}}</span></div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="materials-box datav-box">
      <h4>物料采购趋势</h4>
      <div class="materials-con" >
        <Echart id="rightTop" :options="echoptions"  style="height: 360px"  ref="charts" />
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { filtTimeList } from '@/utils/utils';
import { mapGetters} from "vuex";
export default{
  props:{
    theme:{
      type:String,
      default:''
    }
  },
  data(){
    return{
        materialsList:[
            {name:'图纸设计量',num:0,unit:'t'},
            {name:'计划总量',num:0,unit:'t'},
            {name:'实际总量',num:0,unit:'t'},
            {name:'节超率',num:0,unit:'%'},
        ],
        value:0,
        options:[
            {label:'混凝土',value:0},
            {label:'钢筋',value:1},
        ],
        concrete:[], // 混凝土
        rebar:[], // 钢筋
        timeList:[],
        // echarts
        echoptions:{}
    }
  },
  watch:{
    value(){
        this.getMaterData()
    }
  },
  computed:{
    ...mapGetters(["projects"])
  },
  created(){
    this.timeList = filtTimeList(6)
    this.getMaterData()
    this.$datav.getQueryDailyStatistic({type:0,days:6,projectid:this.projects}).then(res => {
        res.data.map(item => {
            this.concrete.push(item.total)
        })
    })
    this.$datav.getQueryDailyStatistic({type:1,days:6,projectid:this.projects}).then(res => {
        res.data.map(item => {
                 this.rebar.push(item.total)
        })
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    getMaterData(){
        this.$datav.getQueryEntpIndexStatistic({type:this.value,projectid:this.projects}).then(res => {
            this.materialsList[0].num = res.data.estimateData
            this.materialsList[1].num = res.data.planData
            this.materialsList[2].num = res.data.actualData
            this.materialsList[3].num = res.data.sectionSuperRate.toFixed(2)
        })
    },
    init(){
        this.echoptions = {
            color:['#FAB217','#2586F2'],
            legend: {
                data: ['混凝土', '钢筋'],
                textStyle:{
                  color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                }
            },
             grid: {
                left: '3%',
                right: '5%',
                top:'12%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.timeList,
                axisLabel:{
                  color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                }
            },
            yAxis: {
                splitLine:false,
                type: 'value',
                axisLabel:{
                  color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                }
            },
            series: [
                {
                name: '混凝土',
                type: 'line',
                stack: 'Total',
                data: this.concrete
                },
                {
                name: '钢筋',
                type: 'line',
                stack: 'Total',
                data: this.rebar
                }
            ]
        };
    },
  },
}
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
}
p{
    margin: 0;
    padding: 0;
}
.materials-box{
  .materials-header{
    display: flex;
    justify-content: space-between;
  }
  .select{
    ::v-deep .el-input__inner{
        background: linear-gradient(180deg,  rgba(49,65,145,0.7000) 0%, rgba(49,65,145,0) 100%);
        border: 1px solid rgba(255,255,255,0.2000);
        color: #fff;
    }
  }
}

.materials-con{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
  .materials-list{
    width: calc((100% / 2) - 20px);
    height: 80px;
    border: 1px solid rgba(111,129,214,0.8500);
    background: rgba(23,34,87,0.8500);
    color: #fff;
    border-radius: 2px;
    margin-left: 20px;
    margin-top: 20px;
    padding:0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .num{
      font-size: 24px;
      margin:8px 0 0;
      color: #fff;
      span{
        font-size: 16px;
      }
    }
    .materials-name{
      font-size: 14px;
      color: #fff;
      margin: 0;
    }
  }
}

.light{
  .materials-con{
    .materials-list{
    //   background: #fff;
    background: url("../../../assets/images/overview-icon-bg1.png") 0 0 no-repeat;
    background-size: 100% 100%;
    position: relative;
    &::after{
      content: "";
      width: 37px;
      height: 6px;
      background: #F97D00;
      position: absolute;
      right: 0;
      top: 0;
    }
    &:nth-child(1)::after{
      background: #F97D00;
    }
    &:nth-child(2)::after{
      background: #049DE1;
    }
    &:nth-child(3)::after{
      background: #00C876;
    }
    &:nth-child(4)::after{
      background: #D40108;
    }
    border: none;
    color: #333;
      .num{
        color: #333;
      }
      .materials-name{
        color: #333;
      }
    }
  }
  .select{
    ::v-deep .el-input__inner{
        background: #fff;
        border: 1px solid rgba(0,0,0,0.1);
        color: #333;
    }
  }
}
</style>